<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? uerInfo.avatarUrl : avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{ login ? uerInfo.name : '您未登录' }}</text>
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>

		<view class="center-list">
			<view class="center-list-item border-bottom" @click="toExchangeOm()">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text">兑换</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item" @click="toExchangeRecord()">
				<text class="list-icon">&#xe639;</text>
				<text class="list-text">兑换记录</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>

		<view class="center-list">
			<view class="center-list-item" @click="toAbountOm()">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
	computed: mapGetters({
		uMsg: 'userSotre/getUmsg'
	}),

	data() {
		return {
			login: true,
			avatarUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3052225689,834940206&fm=27&gp=0.jpg',
			uerInfo: {
				avatarUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3052225689,834940206&fm=27&gp=0.jpg',
				name: 'LOL'
			}
		};
	},

	methods: {
		goLogin() {
			if (!this.login) {
				console.log('点击前往登录');
			}
		},

		toExchangeOm() {
			if (this.commonOm.isNull(this.uMsg)) {
				this.toPhoneBind();
				return;
			}
			uni.navigateTo({
				url: '../show/exchange-om'
			});
		},

		toExchangeRecord() {
			if (this.commonOm.isNull(this.uMsg)) {
				this.toPhoneBind();
				return;
			}
			uni.navigateTo({
				url: '../show/exchange-record'
			});
		},

		toPhoneBind() {
			uni.navigateTo({
				url: '../show/vercode-login'
			});
		},

		toAbountOm() {
			uni.navigateTo({
				url: '../show/abount-om'
			});
		}
	}
};
</script>

<style>
@font-face {
	font-family: texticons;
	font-weight: normal;
	font-style: normal;
	src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
}

page,
view {
	display: flex;
}

page {
	background-color: #f8f8f8;
}

.center {
	flex-direction: column;
}

.logo {
	width: 750upx;
	height: 240upx;
	padding: 20upx;
	box-sizing: border-box;
	background-color: #0faeff;
	flex-direction: row;
	align-items: center;
}

.logo-hover {
	opacity: 0.8;
}

.logo-img {
	width: 150upx;
	height: 150upx;
	border-radius: 150upx;
}

.logo-title {
	height: 150upx;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	margin-left: 20upx;
}

.uer-name {
	height: 60upx;
	line-height: 60upx;
	font-size: 38upx;
	color: #ffffff;
}

.go-login.navigat-arrow {
	font-size: 38upx;
	color: #ffffff;
}

.login-title {
	height: 150upx;
	align-items: self-start;
	justify-content: center;
	flex-direction: column;
	margin-left: 20upx;
}

.center-list {
	background-color: #ffffff;
	margin-top: 20upx;
	width: 750upx;
	flex-direction: column;
}

.center-list-item {
	height: 90upx;
	width: 750upx;
	box-sizing: border-box;
	flex-direction: row;
	padding: 0upx 20upx;
}

.border-bottom {
	border-bottom-width: 1upx;
	border-color: #c8c7cc;
	border-bottom-style: solid;
}

.list-icon {
	width: 40upx;
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #0faeff;
	text-align: center;
	font-family: texticons;
	margin-right: 20upx;
}

.list-text {
	height: 90upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	flex: 1;
	text-align: left;
}

.navigat-arrow {
	height: 90upx;
	width: 40upx;
	line-height: 90upx;
	font-size: 34upx;
	color: #555;
	text-align: right;
	font-family: texticons;
}
</style>
